<script setup>
import {ref} from "vue";

let isFlag = ref(false)
let flag = ref(false)
</script>

<template>
  <!--条件渲染语句-->
  <!--单独使用的时候，如果boolean类型的值为false的时候不显示文本的内容，只有为True的时候才显示内容-->
  <h1 v-if="isFlag">showPage</h1>
  <!--当有else的时候，我们条件为false的话就会执行else中的标签，else标签必须放置于v-if的下面-->
  <h1 v-else>No showPage</h1>
  <button @click="isFlag = !isFlag">切换</button>
  <hr>
  <h1 v-show="flag">vue 是显示的</h1>
  <button @click="flag = !flag">切换</button>
</template>

<style scoped>

</style>